<script setup>
// 导入pinia数据
import {useItem} from "../../../store/index.js";
import {storeToRefs} from "pinia";
import {reactive, ref, toRefs, markRaw, provide, computed} from "vue";
import HostPath from "./volume/HostPath.vue";
import Secret from "./volume/Secret.vue";
import ConfigMap  from "./volume/ConfigMap.vue";
import  NFS from "./volume/NFS.vue";
import EmptyDir  from "./volume/EmptyDir.vue";
import PersistentVolumeClaim from "./volume/PersistentVolumeClaim.vue";

const {item} = storeToRefs(useItem())
const data = reactive({
  // 当前环境支持的存储类型
  volumeTypeList: [
      'hostPath',
      'secret',
      'configMap',
      'nfs',
      'emptyDir',
      'persistentVolumeClaim',
  ],
  volumeTypeComp:{
    'hostPath': markRaw(HostPath),
    'secret': markRaw(Secret),
    'configMap': markRaw(ConfigMap),
    'nfs': markRaw(NFS),
    'emptyDir': markRaw(EmptyDir),
    'persistentVolumeClaim': markRaw(PersistentVolumeClaim)
  }
})
let volumeType = ref('hostPath')

let showAddVolume = ref(false)
// 添加volume
const addVolume=()=>{
  console.log("添加volume")
  showAddVolume.value=true
}
// 删除volume
const useItemer = useItem()
const deleteVolumeRow= (index)=>{
  useItemer.item.spec.template.spec.volumes.splice(index,1)
}

// 使用发布和订阅的方式关闭dialog
const closeAddVolumeDialog = ()=>{
  showAddVolume.value = false
}

// 使用发布和订阅的方式关闭dialog 把closeAddVolumeDialog 发布出去
provide('closeAddVolumeDialog',closeAddVolumeDialog)
// 获取volume的类型
const getVolumeType = computed(()=>(volumeItem)=>{
  const keyList = Object.keys(volumeItem)

  // 删除name的字段
  keyList.splice(keyList.indexOf('name'),1)
  return keyList[0]
})

const {volumeTypeList,volumeTypeComp} = toRefs(data)
</script>

<template>
    <el-table border :data="item.spec.template.spec.volumes" style="width: 100%" height="400px">
      <el-table-column align="center"  prop="" label="名称" width="240px" >
        <template #default="scope">
          <el-input  v-model="scope.row.name" placeholder="请输入存储卷的名称" />
        </template>
      </el-table-column>
      <el-table-column align="center"  label="类型" width="240px" >
        <template #default="scope">
          <span>{{getVolumeType(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="Volume配置" >
        <template #default="scope">
          <component
              v-if="volumeTypeList.includes(getVolumeType(scope.row))"
              :is="volumeTypeComp[getVolumeType(scope.row)]"
              method="Update"
              :volumeConfig="scope.row"
          ></component>
          <span v-else>
            暂不支持对该类型的Volume进行修改
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center"  fixed="right" width="140px"  >
        <template #header>
          <el-button  link type="primary" @click="addVolume()">添加</el-button>
        </template>
        <template #default="scope">
          <el-button link type="warning" @click="deleteVolumeRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加volume -->
    <el-dialog v-model="showAddVolume" title="添加volume" center destroy-on-close width="60%">
        <el-card style="max-width: 100%">
          <template #header>
            <div class="card-header">
              <el-select v-model="volumeType"  placeholder="请选择volume类型" style="width: 180px">
                  <el-option
                    v-for="t in volumeTypeList"
                    :key="t"
                    :label="t"
                    :value="t"
                  >

                  </el-option>
              </el-select>
            </div>
          </template>
          <component :is="volumeTypeComp[volumeType]"></component>
        </el-card>
    </el-dialog>
</template>

<style scoped>

</style>